import {useRef,useState,useEffect }  from 'react';
import { DatePicker ,Space,Input,Button,Cascader} from 'antd';


import {useSelector,useDispatch } from 'react-redux'
import type { StoreState, StoreDispatch } from '../../store'
import { screenlist } from '../../store/modules/cost/cost'


const {RangePicker} = DatePicker

interface Option {
  value: string;
  label: string;
  children?: Option[];
}

const options: Option[] = [
  {
    value: "内科",
    label: "内科",
    children: [
      {
        value: "肾内科",
        label: "肾内科",
      },
      {
        value: "神经科",
        label: "神经科",
      },
    ],
  },
  {
    value: "外科",
    label: "外科",
    children: [
        {
            value: "牙科",
            label: "牙科",
        },
        {
            value: "皮肤科",
            label: "皮肤科",
      },
    ],
  },
];

function Screen() {


  const [screenObj, setscreenObj] = useState({});
  

  const dispatch: StoreDispatch = useDispatch();


  useEffect(() => {
    console.log("screenObj", screenObj);
    
    dispatch(screenlist(screenObj))

  },[screenObj])

  // 日期选择器
  const DateChange = (value: any) => {
    if (value) {
       const time = value?.map((item: any) => item.$d.getTime());
      setscreenObj({
        ...screenObj,
        formtime: time[0],
        totime:time[1],
      })
    } else {
      setscreenObj({
        ...screenObj,
        formtime: null,
        totime:null,
      })
    }
    console.log("日期选择器");
  };
  // 科室选择
  const DepartmentChange = (value: string[]) => {
    if (value) {
      setscreenObj({
        ...screenObj,
        Department: value[0] + '/' + value[1],
      })
    } else {
      setscreenObj({
        ...screenObj,
        Department: null,
      })
    }
    console.log("科室选择");

  };
  // 搜索事件
  let ref = useRef<any>(null)
  const getInputValue = () => {
    let value
    if (ref) {
      value = ref.current!.input.value
    }
    setscreenObj({
      ...screenObj,
      inptext: value
    })
    console.log("搜索事件");

  };

  // 输入框失去焦点的时候判断输入框是否已经为空，若是则清空条件中输入框内容
  const changeValue = (value: any) => {
    // console.log('value',value.target.value);
     if (value.target.value == '') {
      setscreenObj({
        ...screenObj,
        inptext: null
      })
     } else {
       return
     }
  };

  return (
      <div>
          <Space direction="vertical" size={12}>
              {/* 日期选择器 */}
              <RangePicker
                  placeholder={["请选择日期", "请选择日期"]}
                  onChange={(value) => DateChange(value)}
              />
          </Space>
          <Space>
              <Cascader
                  options={options}
                  onChange={DepartmentChange}
                  placeholder="请选择科室"
                  style={{ margin: "0 20px" }}
              />
          </Space>
          <Space direction="vertical" size={12}>
              {/* 搜索 */}
              <div className='inp-box'>
                      <Input
                      placeholder="请输入病人姓名/就诊卡号"
                      style={{ width: "200px" }}
                      ref={ref}
                      onBlur={(value) => changeValue(value)}
            
                  />
                  <Button onClick={getInputValue} type="primary" style={{ marginLeft: "10px" }}>
                      搜索
                  </Button>
              </div>
          </Space>
          
              
      </div>
  )
}

export default Screen;